/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install composer
建立專案名稱為2020_ironman
composer create-project --prefer-dist laravel/laravel 2020_ironman 6.*
npm install --save-dev vue@2.6.12
resources/js/app.js
,設置全域變數Vue
window.Vue = require('vue');
Goal - 呈現Hello World!在網頁上
Laravel將Blade放在resources/views目錄
// hello.blade.php
<html>
<body>
<div id="app">
@{{ message }}
</div>
<script src="{{mix('js/app.js')}}"></script>
<script src="{{mix('js/hello.js')}}"></script>
</body>
</html>
Laravel將JS放在resources/js目錄下
// hello.js
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
在webpack.mix.js設置要編譯的檔案(hello.js)
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/hello.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Route::get('/', function () {
return view('hello');
});
npm run dev
$ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Vue官方有提供Vue Devtools
方便檢查元件的資料,也可以查看Vuex
的事件與資料變化。
Chrome Plugin
Firefox Plugin